<script lang="ts" setup>
import { Col, Row } from 'ant-design-vue'
import { onMounted } from 'vue'
import { baseSetschemas } from './data'
import { BasicForm, useForm } from '@/components/Form/index'
import { CollapseContainer } from '@/components/Container'
import { useUserStore } from '@/store/modules/employee'

const userStore = useUserStore()

const [register, { setFieldsValue, validate }] = useForm({
  labelWidth: 120,
  schemas: baseSetschemas,
  showActionButtonGroup: false,
})

onMounted(async () => {
  // const data = await getUserProfileApi()
  const data = userStore.getUserInfo
  setFieldsValue(data)
})
</script>

<template>
  <CollapseContainer title="基本设置" :can-expan="false">
    <Row :gutter="24">
      <Col :span="14">
        <BasicForm @register="register" />
      </Col>
      <!--      <Col :span="10"> -->
      <!--        <div> -->
      <!--          <div class="mb-2"> -->
      <!--            头像 -->
      <!--          </div> -->
      <!--                    <CropperAvatar -->
      <!--                      :value="avatar" -->
      <!--                      btn-text="更换头像" -->
      <!--                      :btn-props="{ preIcon: 'ant-design:cloud-upload-outlined' }" -->
      <!--                      width="150" -->
      <!--                      class="mb-4 block rounded-full" -->
      <!--                      @change="updateAvatar" -->
      <!--                    /> -->
      <!--        </div> -->
      <!--      </Col> -->
    </Row>
    <!--    <Button type="primary" @click="handleSubmit"> -->
    <!--      更新基本信息 -->
    <!--    </Button> -->
  </CollapseContainer>
</template>
